<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>性别：{{sex}}</h2>
  <h2>a:{{a}}</h2>
  <button @click="sayHello">说话</button>
  <br>
  <br>
  <button @click="sayWelcome">说话</button>
  <br>
  <br>
  <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
  <br>
  <br>
  <button @click="test2">测试一下在Vue3中的setup配置中去读取Vue2的数据、方法</button>
</template>

<script>
import {h} from 'vue'
export default {
  name: 'App',
  data(){
    return{
      sex:"男",
      a:100
    }
  },
  methods:{
    sayWelcome(){
      alert("你好"+this.sex+"士，欢迎光临")
    },
    test1(){
      console.log("name",this.name)
      console.log("age",this.age)
      console.log("sex",this.sex)
      console.log("sayHello",this.sayHello)
      console.log("sayWelcome",this.sayWelcome)
    },

  },


  //此处只是测试一下setup，暂不考虑响应式的问题
  setup(){
    //数据
    let name="张三"
    let age=18
    let a=200

    //方法
    function sayHello(){
      alert(`我叫${name},今年${age}岁了~`)
    }
    function test2(){
      console.log('------------------------')
      console.log('name',name);
      console.log('age',age)
      console.log('sex',this.sex)
      console.log('sayWelcome',this.sayWelcome)
    }
    //返回一个对象（常用）
    return{
      name,
      age,
      sayHello,
      test2,
      a
    }
    //返回一个函数（渲染函数）
    // return ()=>h('h1','个人信息')
  }
}
</script>


